<template>
  <div class="app-container">
      <div class="filter-container">
        
        <el-input clearable v-model="search.orderNum" placeholder="销售顾问" style="width: 170px;margin-right:10px;"></el-input>
        
        <el-date-picker v-model="search.daterange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>

        <el-button type="primary" icon="el-icon-search" @click="searchClick()" style="margin-left:10px;">查询</el-button>
    </div>

    <div class="content">
        <el-table v-loading="listLoading" :data="list" 
            border fit highlight-current-row stripe 
            style="width: 100%">
            <el-table-column align="center" label="序" width="80">
                <template slot-scope="scope">
                <span>{{ scope.row._id }}</span>
                </template>
            </el-table-column>
            <el-table-column  min-width="100" align="center" label="销售顾问">
                <template slot-scope="scope">
                <span>{{ scope.row.guider }}</span>
                </template>
            </el-table-column>
            <el-table-column  min-width="100" align="center" label="目标">
                <template slot-scope="scope">
                <span>{{ scope.row.target }}</span>
                </template>
            </el-table-column>
            <el-table-column  min-width="100" align="center" label="接待数">
                <template slot-scope="scope">
                <span>{{ scope.row.current }}</span>
                </template>
            </el-table-column>
            <el-table-column  min-width="100" align="center" label="完成率">
                <template slot-scope="scope">
                <span>{{ scope.row.percent }}</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="chart" id="receptionChart" style="width:100%;height:400px;"></div>
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts';
import * as receptionApi from '@/api/presale/reception'

export default {
    data(){
        return {
            list:null,
            listLoading:false,
            search:{

            }
        }
    },
    created(){
        //echarts注册
        // echarts.use(
        //     [TitleComponent, TooltipComponent, GridComponent, LineChart, CanvasRenderer]
        // );
        this.fetchData();
    },
    methods:{
        fetchData(){
            var that=this;
            receptionApi.getAnalyzes({}).then(res=>{
                if(res.data){
                    that.list=res.data.items.map((o,index)=>{
                        o._id=index+1;
                        o.percent=((o.current /o.target)*100).toFixed(1);
                        return o;
                    });
                    that.initCharts(that.list);
                }
            })
        },
        initCharts(datalist){
            var element=document.getElementById('receptionChart');
            var c=echarts.init(element);
            var dataX=datalist.map(o=>o.guider);
            var dataS=datalist.map(o=>o.percent);
            c.setOption({
                xAxis: {
                    type: 'category',
                    data: dataX,
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: dataS,
                    type: 'line'
                }]
            });
            this.$nextTick(()=>{
                c.resize();
            })

        },
        searchClick(){
            this.fetchData();
        }
    }
}
</script>

<style>

</style>